<!--  -->
<template>
  
  <div class='data-display'>

    <p class="titles">机器人部件实时库存数据</p>
    <el-row :span="24">
      <el-col v-for="(item,index) in pdata"
              :key="index"
              :span="span">
        <div class="item"
             :style="{color:color}">
          <h5 class="count0" v-if="item.robot_part_num <= 3" >
            <CountUp :start="14"
                     :end= item.robot_part_num>{{item.robot_part_num}}</CountUp> 
          </h5>
          <h5 class="count" v-else >
            <CountUp :start="14"
                     :end= item.robot_part_num>{{item.robot_part_num}}</CountUp> 
          </h5>
          <span class="splitLine"></span>
          <p class="title">{{item.robot_part}}</p>
          <el-image class="images"
            
            :src= item.robot_pic_url
            :fit="fits"></el-image>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountUp from '@/components/count-up/index.vue'
import { start } from "../../api/api.js";

export default {
  components: { CountUp },
  data () {

    return {
      span: 8,
      pdata: [],
      color:'rgb(63, 161, 255)',
      fits: 'fill',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
     
    };
  },

 created () {
   this.click_start()
  },
  methods: {
      click_start() {
      start().then(resp => {
        this.pdata = resp.data
        console.log('start --->', resp.data);
       }).catch(error => {
        console.log(error.response);
      });
    },
}
}
</script>

<style scoped>
/* @import url(); 引入公共css类 */
.item {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 5px 0;
  text-align: center;
}

.count {
  margin: 8px 0;
  font-weight: bold;
  font-size: 40px; 
  /* font-size: 32px; */
  color: #15a0ff;
}
.count0 {
  margin: 8px 0;
  font-weight: bold;
  font-size: 40px;
  color: #f30b2a;
}

.title {
  color: rgb(86, 90, 86);
  
  /* font-weight: bold; */
}

.splitLine {
  display: block;
  margin: 0 auto;
  width: 100px;
  height: 1px;
  background: #9b9b9b;
}
.titles  {
  font-size: 30px;
  font-weight: bold;
  line-height: 1.15;
  padding: 18px 0 18px 18px;
  color: #15a0ff;
}
.images {
  width: 120px;
  height: 100px;
  -webkit-transition:  width 1s,height 1s,-webkit-transform 1s;
  transition: width 1s,height 1s,transform 1s;

}

.images:hover {

  width: 240px;
  height: 200px;

  transform: rotate(360deg);
  -webkit-transform:rotate(360deg);
}

</style>